<template>
  <div class="app-container" v-loading="appLoading">
    <!-- 高级查询 -->
    <div class="filter_container">
      <el-tabs v-model="queryParams.status" type="card" @tab-click="handleSearchQuery">
        <el-tab-pane name="newRece">
          <span slot="label"><i class="el-icon-s-order" /> 退单未处理</span>
        </el-tab-pane>
        <el-tab-pane name="PROCESSED">
          <span slot="label"><i class="el-icon-bank-card" /> 退单已处理</span>
        </el-tab-pane>
        <el-tab-pane name="ERROR">
          <span slot="label"><i class="el-icon-bank-card" /> 退单失败</span>
        </el-tab-pane>
      </el-tabs>
     </div>
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="退货单号:">
        <el-input v-model="queryParams.returnOrderNo" size="small" placeholder="请输入退货单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="子订单号:">
        <el-input v-model="queryParams.custSalesOrderItemNo" size="small" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="申请时间自:">
        <el-date-picker v-model="queryParams.createTimeBegin" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择申请时间" clearable />
      </el-form-item>
      <el-form-item label="申请时间至:">
        <el-date-picker v-model="queryParams.createTimeEnd" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择申请时间" clearable />
      </el-form-item>
    <!--  <el-form-item label="退货单状态:">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small" >
           <el-option v-for="status in options.statuss" :key="status.key" :label="status.label" :value="status.key"  />
         </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">

      <!-- <el-col :span="1.5">
        <el-button type="info" icon="el-icon-upload2" size="mini" @click="importRet">退单导入</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button  v-if="queryParams.status === `newRece`" type="info" icon="el-icon-upload2" size="mini" @click="batchProcess">勾选处理退单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button  v-if="queryParams.status === `newRece`" type="info" icon="el-icon-upload2" size="mini" @click="batchProcessAll">批量处理退单</el-button>
      </el-col>
     <el-col :span="1.5">
        <el-button  v-if="queryParams.status === `ERROR`" type="info" icon="el-icon-upload2" size="mini" @click="batchProcessError">再次处理退单</el-button>
      </el-col>
      <el-col :span="1.5">
         <el-button   type="info" icon="el-icon-upload2" size="mini" @click="batchProcessFix">修理退单时间</el-button>
       </el-col>

       <el-col :span="1.5">
          <el-button   type="info" icon="el-icon-upload2" size="mini" @click="batchProcessFixRtAmt">修理退单金额</el-button>
        </el-col>
      <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handlePageQuery" />

     <!-- <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" /> -->
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column  type="selection" width="55" align="center" />
      <el-table-column label="退货单号" align="center" prop="returnOrderId" width="155"/>
      <el-table-column label="子订单号" align="center" show-overflow-tooltip width="180">
       <template slot-scope="scope">
        <el-button type="text" @click="handleOrderView(scope.row)">{{ scope.row.custSalesOrderItemNo }}</el-button>
      </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="90">
       <template slot-scope="scope">
          <span>{{ scope.row.status | returnStatusFilter }}</span>
        </template>
      </el-table-column>
       <el-table-column label="申请时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品SKU" align="center" prop="custSkuId" width="155"/>
      <el-table-column label="商品SPU" align="center" prop="custSpuId" width="155"/>
      <el-table-column label="退款金额" align="center" prop="money" />
      <el-table-column v-if="queryParams.status=== `ERROR`" label="报错原因" align="center" prop="importErrorMesg" width="255"/>
      <el-table-column label="里程额" align="center" prop="mileagePrice" />
      <el-table-column label="现金额" align="center" prop="paymentPrice" />
      <el-table-column label="退款数量" align="center" prop="qty" />

      <el-table-column label="退单时间" align="center" prop="lastUpdDt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdDt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理时间" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermission="['order:returnOrder:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    </div>
</template>

<script>
import ReturnOrderItemApi from '@/api/order/ReturnOrderItemApi'
import AccountingApApi from '@/api/accounting/AccountingApApi'
import appConstant from '@/constant/AppConstant'
export default {
  name: 'OmsReturnOrderList',
  filters: {
    returnStatusFilter(item) {
      const values = appConstant.returnStatusList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
   },
  data() {
    return {
      options: {
        sysYnTypeOptions: [],
        statuss: appConstant.returnStatusList
      },
      queryParams: {
        returnOrderNo: null,
        custSalesOrderItemNo: null,
        createTime: null,
        createTimeBegin: null,
        createTimeEnd: null,
        status: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      loading: true,
      appLoading: false,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
    },
    handleAdd() {
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return ReturnOrderItemApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
    },
    batchProcessAll() {
      this.appLoading = true
      AccountingApApi.processReturn().then(() => {
        this.appLoading = false
        this.$message.success('处理退单成功!')
        this.handleQuery()
      }).catch(error => {
        console.log(error)
        this.$message.error('处理退单失败!')
        this.appLoading = false
      })
    },
  batchProcessFix() {
     this.appLoading = true
     AccountingApApi.batchProcessFix().then(() => {
       this.appLoading = false
       this.$message.success('处理成功!')
       this.handleQuery()
     }).catch(error => {
       console.log(error)
       this.$message.error('处理失败!')
       this.appLoading = false
     })
    },
    batchProcessFixRtAmt() {
       this.appLoading = true
       AccountingApApi.batchProcessFixRtAmt().then(() => {
         this.appLoading = false
         this.$message.success('处理成功!')
         this.handleQuery()
       }).catch(error => {
         console.log(error)
         this.$message.error('处理失败!')
         this.appLoading = false
       })
      },
    batchProcessError() {
     /* if (!this.multipleSelection || this.multipleSelection.length === 0) {
        return false
      }
      for (let i=0; i<this.multipleSelection.length; i++) {
        const row = this.multipleSelection[i] */
        // 有结算成功或结算失败的订单时，不允许提交 custOrderItemNo
        // if (row.status === 'PROCESSED'||row.status === 'SETTLED') {
        //   this.$message.error('退单已处理或已下账的退单不能提交!')
        //   return false
        // }
      // }
   //   const ids = this.multipleSelection.map(item => item.id)
     this.appLoading = true
     AccountingApApi.reprocessReturn().then(() => {
       this.appLoading = false
       this.$message.success('处理退单成功!')
       this.handleQuery()
     }).catch(error => {
       console.log(error)
       this.$message.error('处理退单失败!')
       this.appLoading = false
     })
    },
    batchProcess() {
      if (!this.multipleSelection || this.multipleSelection.length === 0) {
        return false
      }
      for (let i=0; i<this.multipleSelection.length; i++) {
        const row = this.multipleSelection[i]
        // 有结算成功或结算失败的订单时，不允许提交 custOrderItemNo
        if (row.status === 'PROCESSED'||row.status === 'SETTLED'||row.status === 'ERROR') {
          this.$message.error('处理后或已下账汇总错误的退单不能提交!')
          return false
        }
      }
      const ids = this.multipleSelection.map(item => item.id)
      this.appLoading = true
      AccountingApApi.batchProcessReturn(ids).then(() => {
        this.appLoading = false
        this.$message.success('处理退单成功!')
        this.handleQuery()
      }).catch(error => {
        console.log(error)
        this.$message.error('处理退单失败!')
        this.appLoading = false
      })
    },
    handleSearchErrorQuery() {
      this.loading = true
       this.queryParams.status = 'ERROR'
      ReturnOrderItemApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleSearchQuery() {
      this.loading = true
      ReturnOrderItemApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleQuery() {
      this.loading = true
     this.queryParams.status = 'newRece'
      ReturnOrderItemApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handlePageQuery() {
      this.loading = true

      ReturnOrderItemApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleOrderView(row) {
      this.$router.push({ path: `/accountingAp/accountingApReturnList/${row.custSalesOrderItemNo}` })
    },
    handleExport() {
      this.$confirm('是否确认导出所有退货单数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return ReturnOrderItemApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.data)
      })
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
